<template>
    <div class="forget">
        <div class="login-title">
            <p class="title">重置密码</p>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0" v-if="step == 1">
            <el-form-item prop="phone" class="el-item_login">
                <el-input placeholder="请输入手机号" maxlength="11"
                    @input="ruleForm.phone = ruleForm.phone.replace(/[\u4E00-\u9FA5\s]/g, '')" type="tel" autoComplete="off"
                    v-model="ruleForm.phone">
                </el-input>
            </el-form-item>
            <el-form-item prop="code" class="el-item">
                <el-input placeholder="请输入验证码" maxlength="6"
                    @input="ruleForm.code = ruleForm.code.replace(/[\u4E00-\u9FA5\s]/g, '')" autoComplete="on"
                    v-model="ruleForm.code">
                    <template #suffix>
                        <div class="getcode" @click="getCode" v-if="count == 0">获取验证码</div>
                        <div class="getcode" v-else>{{ count }}s重新获取</div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button class="login-btn" :loading="loading" :disabled="!(ruleForm.phone && ruleForm.code)"
                    type="primary" color="#007cff" @click="step = 2">下一步</el-button>
                <div class="goback" @click="goLogin">返回登录</div>

            </el-form-item>
        </el-form>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0" v-if="step == 2">
            <el-form-item prop="password" class="el-item">
                <el-input placeholder="新密码" autoComplete="on"
                    @input="ruleForm.password = ruleForm.password.replace(/[\u4E00-\u9FA5\s]/g, '')"
                    v-model="ruleForm.password" :type="passwordType">
                    <template #suffix>
                        <div class="show-pwd" @click="showPwd"><svg-icon
                                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="newpassword" class="el-item">
                <el-input placeholder="确认密码" autoComplete="on"
                    @input="ruleForm.newpassword = ruleForm.newpassword.replace(/[\u4E00-\u9FA5\s]/g, '')"
                    v-model="ruleForm.newpassword" :type="passwordType2">
                    <template #suffix>
                        <div class="show-pwd" @click="showPwd2"><svg-icon
                                :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" /></div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button class="login-btn" :loading="loading" :disabled="!(ruleForm.password && ruleForm.newpassword)"
                    type="primary" color="#007cff" @click="submitForm(ruleFormRef)">提交</el-button>
                <div class="goback" @click="step = 1">返回上一步</div>
            </el-form-item>
        </el-form>
        <div class="success" v-if="step == 3">
            <el-icon color="#fd7400" size="90">
                <SuccessFilled />
            </el-icon>
            <div class="success_text">
                恭喜 密码已重置
            </div>
            <div class="tip">
                请用新的密码进行登录系统
            </div>
            <el-button class="login-btn" type="primary" color="#007cff" @click="goLogin">返回登录</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from 'vue'

import { ElMessage, FormInstance } from "element-plus";
import { updateCode, notLoginUpdatePassword } from '../../../api/user'
import { password, phone } from '../../../utils/validate'
import { useRouter } from 'vue-router'
import { md5 } from "js-md5";
const ruleFormRef = ref<FormInstance>()
const clear = ref(null)
const router = useRouter()
const passwordType = ref('password')
const passwordType2 = ref('password')
const loading = ref(false)
const step = ref(1)
const emit = defineEmits(['change-show-login'])
// 登录页面
const goLogin = () => {
    router.push({ path: '/login/index' })
}

//md5密码加密
const { proxy } = getCurrentInstance() as any
proxy.$md5 = md5   //md5转换为vue原型
// 表单数据

const ruleForm = reactive({
    phone: '',
    password: '',
    newpassword: '',
    code: '',
})
const rules = reactive({
    phone: [{ required: true, message: "请输入手机号", trigger: "blur" }, { validator: phone(ruleForm.phone), trigger: 'blur' }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }, { validator: password(ruleForm.password), trigger: "blur" }],
    code: [{ required: true, message: '请输入正确的验证码', trigger: "blur" }, { pattern: /^\d*$/, message: '请输入正确的验证码', trigger: "blur" }],
    newpassword: [{ required: true, message: "请确认密码", trigger: "blur" }, {
        validator: (rule: any, value: string, callback: any) => {
            if (ruleForm.password != ruleForm.newpassword) {
                callback(
                    new Error("密码不一致")
                );
            } else {
                callback()
            }
        }, trigger: "blur"
    }],
})

// 倒计时
const count = ref(0)
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
}
const showPwd2 = () => {
    if (passwordType2.value === 'password') {
        passwordType2.value = ''
    } else {
        passwordType2.value = 'password'
    }
}
// 提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    loading.value = true
    formEl.validate((valid) => {
        if (valid) {
            let data = {
                phone: ruleForm.phone,
                password: proxy.$md5(ruleForm.password),//md5加密
                code: ruleForm.code
            }
            notLoginUpdatePassword(data).then(async (res: any) => {
                loading.value = false
                if (res.data.success) {
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: 'success',
                        duration: 1000
                    })
                    step.value = 3
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: 'error',
                        duration: 1000
                    })
                }
            })
        } else {
            return false
        }
    })
}

// 获取验证码
const getCode = () => {
    if (!ruleForm.phone) {
        ElMessage({
            showClose: true,
            message: "请先输入手机号",
            type: 'error',
            duration: 1000
        })
        return
    }
    count.value = 59
    clear.value = setInterval(() => {
        count.value -= 1
        if (count.value == 0) {
            clearInterval(clear.value)
        }
    }, 1000)
    updateCode({ phone: ruleForm.phone }).then(res => {
        if (res.data.success) {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'success',
                duration: 1000
            })

        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                duration: 1000
            })
        }
    })
}
</script>
  
<style lang="scss" scoped>
@import "../index.scss";

.forget {
    .login-btn {
        font-size: 16px;
        border: none !important;
        margin: 20px auto 0;
    }

    .goback {
        color: #007cff;
        font-size: 14px;
        text-align: center;
        margin: 10px auto 0;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    .success {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin-top: 40px;

        .success_text {
            color: #fd7400;
            font-size: 14px;
            margin: 20px;
        }

        .tip {
            color: #999;
            font-size: 14px;
        }
    }
}</style>
  